<template>
    <div class="talk">
        <button @click="getLoveTalk">获取情话</button>
        <ul>
            <li v-for="talk in loveTalk.talkList" :key="talk.id">{{talk.title}}</li>
        </ul>
    </div>
</template>

<script setup name="LoveTalk">
import { reactive } from 'vue';
import axios from 'axios';
import { nanoid } from "nanoid";
import {useLoveTalkStore} from '../store/LoveTalk';

const loveTalk = useLoveTalkStore();

async function getLoveTalk(){
    //let result = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');
    let {data} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');
    //console.log(result.data.content);
    // talkList.unshift({id:nanoid(),title:result.data.content});
    loveTalk.talkList.unshift({id:nanoid(),title:data.content});
}
</script>

<style scoped>
.talk{
    margin-top: 30px;
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
</style>